<template>
  <div class="app-container">
           <XTablePage
              ref="tablePage"
              :columnsList="columnsList"
              :apiUrl="'/boss/tc-course/tc-course-list'"
              :method="'post'"
              :formConfig="getFormConfig"
              :openForm="false"
              :export="false"
              :selectTreeList="treeData"
              @toolbarButtonClickEvent="toolbarButtonClickEvent"
              :toolButtons="tools"
              :toolbarConfig="true">
      <template #actions="{ row }">
        <el-link
            size="medium"
          type="primary"
          icon="el-icon-edit"
          @click="eidtItem(row)"
        >编辑</el-link>
            <el-link
            size="medium"
              type="primary"
              icon="el-icon-bell"
              v-if="row.approveStatus===0"
              @click="examineItem(row)"
            >审核</el-link>
            
              <el-link
                v-if="row.approveStatus===0 || row.approveStatus===2"
                size="medium"
                type="danger"
                icon="el-icon-delete"
                @click="delItem(row)" >删除</el-link>
      </template>
    </XTablePage>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="600px">
      <el-form :model="formData"  size="medium" :rules="rules" ref="formData" label-width="90px">

        <el-form-item label="分类" prop="categoryId"> 
         <el-cascader style="width:100%"
          v-model="formData.categoryId" 
          :options="treeData"
          :props="defaultProps"
          @change="handleChange"></el-cascader> 
        </el-form-item>
        <el-form-item label="课件" prop="urlPath">
         <upload v-if="dialogVisible" v-model="formData.urlPath" :text="showText" @getDataInfo="getDataInfo" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button  size="medium" icon="el-icon-close" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" icon="el-icon-finished"  size="medium"
                       @click="submitForm('formData')">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>
<script>
import upload from './upload'
import {getCategoryTree,saveCourse,delCourse,approveCourse,enableCourse} from '@/api/teachManage'
export default {
  components:{upload},
  name:'teachList',
  data() {
    return {
      columnsList: [
      {
         title: "序号",
         type: 'seq', 
         width: 60,
         fixed:'left',
         align:'center',
       },
        {field: 'name',  title: '课件名称'},
        {field: 'categoryUrl',  title: '分类'},
        {field: 'enableStatusDesc', title: '状态',
          slots: { default:(({row})=>{
            return [
            <el-switch
              v-model={row.enableStatus}
              active-value={0}
              inactive-value={1}
              onChange={(value)=>{
                {/* this.$confirm('您确定要'+(value===0?'启用':'禁用')+'该课程？', '消息提示', {
                    }).then(() => {
                    }).catch(action => {
                        this.getDataList()
                    }); */}
                      enableCourse({
                          courseId: row.courseId,
                          enableStatus:value
                      }).then((res)=>{
                            if (res.code === 0) {
                              this.$message.success("更改成功");
                            } else {
                              this.$message.error(res.message||"操作失败");
                            }
                            this.getDataList()
                    })
              }}>
            </el-switch>
            ]
          }) 
         }
        },
        {field: 'approveStatusDesc', title: '审核状态',
          slots: { default:(({row})=>{
            return [<el-tag type={row.approveStatus===2?'danger':(row.approveStatus===0?'warning':'success')}>{row.approveStatusDesc}</el-tag>]
          }) }
        },
        {field: 'updateTime',  title: '更新时间'},
        {title: '操作', width: 260, fixed: "right", slots: {default: 'actions'}}],
           tools: [
          { code: 'btn-add', name: '添加', icon: 'el-icon-plus', status: 'primary' }
        ],
      formData: {
        categoryId:'',
        urlPath:'',
         name:'',
        fileSize:'',
        courseId:'',
        fileImg:'',
        localPath:'',
        fileDigestSha1:''
      },
      rules: {
         categoryId: [
            { required: true, message: '请选择分类', trigger: 'blur' },
          ],
          urlPath: [
            { required: true, message: '请上传课件', trigger: 'blur' },
          ],
      },
      dialogVisible: false,
      defaultProps: {
          children: 'children',
          label: 'name',
          value:'categoryId'
        },
        treeData:[],
        showText:'',
        title:''
    }
  },
  computed: {
    getFormConfig(){
      let self = this
     return {
        titleAlign: 'center',
        items: [
          {
            field: 'name',
            title: '课件名称',
            span: 4,
            itemRender: {name: '$input', props: {placeholder: '请输入课件名称', clearable: true}}
          },
          {
            field: 'enableStatus',
            title: '状态',
            span: 4,
            itemRender: {
              name: '$select',
              props: {
                placeholder: '全部',
                clearable: true,
                options: [
                  {label: '启用', value: 0},
                  {label: '禁用', value: 1}
                ]
              }
            }
          },
          {
            field: 'approveStatus',
            title: '审核状态',
            span: 4,
            itemRender: {
              name: '$select',
              props: {
                placeholder: '全部', 
                clearable: true,
                options: [
                  {label: '待审核', value: 0},
                  {label: '已通过', value: 1},
                  {label: '未通过', value: 2}
                ]
              }
            }
          },
          {
            field: 'categoryId',
            title: '分类',
            span: 6,
            slots:{ default: 'select' },
            itemRender: {
              name: '$select'
            }
          },
          {
            align: 'center', 
            itemRender: {
              name: '$buttons',
              children: [
                {props: {type: 'submit', icon: 'el-icon-search', content: '查询', status: 'primary'}},
                {props: {type: 'reset', icon: 'el-icon-delete', content: '重置'}}]
            }
          }
        ]
      }
    }
  },
  created() {
    this.getTreeList()
  },
  methods: {
    getDataList(){
      this.$refs.tablePage.changeData({})
    },
    getChildren(list){
      if(list.length){
       return  list.map((item)=>{
          if(item.children.length){
            item.children= this.getChildren(item.children)
          }else{
            item.children =null
          }
        return item
       })
      }else{
        return []
      }
    },
      getTreeList(){
      getCategoryTree({
        "limit": 999,
        "name": "",
        "orderField": "",
        "orderType": "",
        "page": 1
      }).then((res)=>{
        if(res.code===0){
          console.log(res.data)
          this.treeData = this.getChildren(res.data)
        }
      })
    },
    handleChange(value) {
        console.log(value);
      },
      toolbarButtonClickEvent(code){
        this.showText =''
        this.formData.courseId =''
        this.formData.categoryId =''
        this.formData.urlPath=''
        this.formData.name=''
        this.formData.fileSize=''
        this.formData.fileDigestSha1=''
        this.dialogVisible=true
        this.title='添加'
      },
    removeRowEvent(row) {
      console.log(row)
      this.formData = row;
      this.dialogVisible = true
    },
    eidtItem(row){
      this.formData.categoryId =row.categoryId
      this.formData.courseId =row.courseId
      this.formData.urlPath=row.urlPath
      this.formData.name=row.name
      this.formData.fileSize=row.fileSize
      this.formData.fileDigestSha1=row.fileDigestSha1
      this.formData.localPath =row.localPath
      this.formData.fileImg=row.fileImg
      this.showText =row.name
      this.dialogVisible=true
      this.title='编辑'
    },
    examineItem(row){
      this.$confirm('您确定要审核通过该课程？', '消息提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '通过',
          cancelButtonText: '不通过'
        }).then(() => {
          approveCourse({id:1,courseApproveId:row.courseApproveId}).then((res)=>{
            this.getDataList()
          })
          }).catch(action => {
           if(action==='cancel'){
            approveCourse({courseApproveId:row.courseApproveId,rejectReason:'--'}).then((res)=>{
              this.getDataList()
            })
           }
        });
    },
    delItem(row){
       this.$confirm('您确定要删除该课程？', '消息提示', {
        }).then(() => {
          delCourse([row.courseId]).then((res)=>{
            if (res.code === 0) {
                  this.$message.success("删除成功");
                  this.getDataList()
                } else {
                  this.$message.error(res.message||"操作失败");
                }
          })
          }).catch(action => {
        });
    },
    getDataInfo(data){
       this.formData.fileSize=data.fileSize
        this.formData.name=data.name
        this.formData.localPath=data.localPath
        this.formData.fileImg=data.previewUrl
        this.formData.fileDigestSha1=data.fileDigestSha1
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            saveCourse({
              categoryId:this.formData.categoryId[this.formData.categoryId.length-1]||this.formData.categoryId,
              urlPath:this.formData.urlPath,
              localPath:this.formData.localPath, 
              name:this.formData.name,
              fileSize:this.formData.fileSize,
              courseId:this.formData.courseId,
              fileImg:this.formData.fileImg,
              fileDigestSha1:this.formData.fileDigestSha1,
            }).then((res) => {
                if (res.code === 0) {
                  this.$message.success("操作成功");
                  this.dialogVisible = false;
                  this.getDataList()
                } else {
                  this.$message.error(res.message||"操作失败");
                }

              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });



    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style lang="scss">
.app-container {
  padding: 10px;
  box-sizing: border-box;
  height: calc(100vh - 84px);
  overflow: auto;

  .type--datetime {
    z-index: 99 !important;
  }

  .imageSize {
    width: 300px;
    height: 150px;
  }
}
</style>
